<template>
  <BasicDrawer :showFooter="true" :showOkBtn="false" @register="registerDrawer" width="80%">
    <template #title>
      <Icon icon="simple-line-icons:settings" class="mr-2" />
      <span class="text-xl font-medium">机床控制台</span>
    </template>
    <div class="p-4">
      <!-- 机床状态卡片 -->
      <div class="mb-6">
        <div
          class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-6 border border-blue-100 shadow-sm"
        >
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-4">
              <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center">
                <Icon icon="ant-design:tool-outlined" class="text-white text-xl" />
              </div>
              <div>
                <h2 class="text-4xl font-bold text-gray-800 mb-1">{{ machineObj.name }}</h2>
                <div class="flex items-center space-x-2">
                  <span class="text-lg text-gray-600">状态：</span>
                  <DictLabel
                    v-if="machineObj.machineStatus"
                    :dictType="'m8_machine_status'"
                    :dictValue="machineObj.machineStatus"
                    class="machine-status-label"
                  />
                </div>
              </div>
            </div>
            <div class="flex space-x-3">
              <a-popconfirm
                title="是否确认开机？"
                ok-text="是"
                cancel-text="否"
                @confirm="machineEnable(machineObj.code, '0')"
              >
                <a-button
                  type="primary"
                  size="large"
                  v-if="machineObj.machineStatus == '2' && hasPermission(['m8:machine:open'])"
                  class="bg-green-500 border-green-500 hover:bg-green-600 hover:border-green-600"
                >
                  <Icon icon="ant-design:poweroff-outlined" class="mr-1" />
                  开机
                </a-button>
              </a-popconfirm>
              <a-popconfirm
                title="是否确认停机？"
                ok-text="是"
                cancel-text="否"
                @confirm="machineEnable(machineObj.code, '1')"
              >
                <a-button
                  type="primary"
                  size="large"
                  danger
                  v-if="machineObj.machineStatus != '2' && hasPermission(['m8:machine:stop'])"
                >
                  <Icon icon="ant-design:play-square-outlined" class="mr-1" />
                  停机
                </a-button>
              </a-popconfirm>
            </div>
          </div>
        </div>
      </div>

      <!-- 任务信息卡片 -->
      <div class="mb-6" v-if="machineObj.task">
        <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
          <div class="flex gap-4 text-lg mb-5">
            <div class="flex items-center space-x-2 flex-2">
              <Icon icon="ant-design:play-circle-outlined" class="text-blue-500 text-xl" />
              <!-- <span class="text-gray-600">工序：</span> -->
              <span class="font-medium">{{ machineObj.task?.oper?.operName || '-' }}</span>
            </div>
            <div class="flex items-center space-x-2 flex-6">
              <Icon icon="ant-design:file-image-outlined" class="text-green-500 text-xl" />
              <!-- <span class="text-gray-600">图名：</span> -->
              <span class="font-medium">{{ machineObj.task?.orderPic?.picname || '-' }}</span>
            </div>
            <div class="flex items-center space-x-2 flex-2">
              <Icon icon="ant-design:number-outlined" class="text-orange-500 text-xl" />
              <!-- <span class="text-gray-600">图号：</span> -->
              <span class="font-medium">{{ machineObj.task?.orderPic?.picno || '-' }}</span>
            </div>
          </div>
          <div class="flex gap-4 text-lg mb-5">
            <div class="flex items-center space-x-2 flex-2">
              <Icon icon="ant-design:user-outlined" class="text-blue-500 text-xl" />
              <!-- <span class="text-gray-600">工序：</span> -->
              <span class="font-medium">{{ machineObj.managerNames || '-' }}</span>
            </div>
            <div class="flex items-center space-x-2 flex-6">
              <!-- <FieldTimeOutlined /> -->
              <Icon icon="ant-design:field-time-outlined" class="text-green-500 text-xl" />
              <!-- <span class="text-gray-600">图名：</span> -->
              <span class="font-medium"
                >{{ machineObj.beginTime || '-' }} - {{ machineObj.endTime || '-' }}</span
              >
            </div>
            <div class="flex items-center space-x-2 flex-2">
              <Icon icon="ant-design:field-time-outlined" class="text-orange-500 text-xl" />
              <!-- <span class="text-gray-600">图号：</span> -->
              <span class="font-medium">{{ machineObj.task?.nextCheckDate || '-' }}</span>
            </div>
          </div>
          <div class="flex gap-4 text-lg">
            <div class="flex items-center space-x-2">
              <!-- <RiseOutlined /> -->
              <Icon icon="ant-design:rise-outlined" class="text-orange-500 text-xl" />
              <!-- <span class="text-gray-600">工序：</span> -->
              <!-- <span class="font-medium">{{ machineObj.task?.orderPic?.picno || '-' }}</span> -->
              <span v-if="machineObj.task" class="font-medium">
                {{
                  '   加(' +
                  (machineObj.useJgTime || '无') +
                  ') 完(' +
                  (machineObj.sumQty || '无') +
                  ')'
                }}
                <span v-if="machineObj.task.orderPic">
                  {{ '图(' + (machineObj.task.orderPic.iqty || '无') + ')' }}
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="lg:flex gap-6">
        <div class="enter-y w-full lg:w-1/2">
          <div class="mb-6">
            <Card class="shadow-sm border-0 rounded-lg overflow-hidden">
              <template #title>
                <div class="flex items-center space-x-2">
                  <Icon icon="ant-design:tool-outlined" class="text-blue-500 text-xl" />
                  <span class="text-xl font-medium text-gray-800">机加操作</span>
                </div>
              </template>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div
                  @click="handleBarCode('图纸上机', 'shangJi')"
                  class="operation-card bg-gradient-to-br from-green-50 to-green-100 hover:from-green-100 hover:to-green-200 border-green-200"
                >
                  <Icon
                    icon="ant-design:fund-projection-screen-outlined"
                    class="text-green-600 text-4xl mb-2"
                  />
                  <span class="text-green-800 font-medium text-lg">图纸上机</span>
                </div>

                <div
                  @click="handleBarCode('图纸下机', 'xiaJi')"
                  class="operation-card bg-gradient-to-br from-green-50 to-green-100 hover:from-green-100 hover:to-green-200 border-green-200"
                >
                  <Icon icon="ant-design:desktop-outlined" class="text-green-600 text-4xl mb-2" />
                  <span class="text-green-800 font-medium text-lg">图纸下机</span>
                </div>

                <div
                  @click="handleBarCode('调试登记', 'debug')"
                  class="operation-card bg-gradient-to-br from-green-50 to-green-100 hover:from-green-100 hover:to-green-200 border-green-200"
                >
                  <Icon icon="ant-design:bug-outlined" class="text-green-600 text-4xl mb-2" />
                  <span class="text-green-800 font-medium text-lg">调试登记</span>
                </div>

                <div
                  @click="handleBarCode('开始加工', 'beginWork')"
                  class="operation-card bg-gradient-to-br from-green-50 to-green-100 hover:from-green-100 hover:to-green-200 border-green-200"
                >
                  <Icon icon="ant-design:poweroff-outlined" class="text-green-600 text-4xl mb-2" />
                  <span class="text-green-800 font-medium text-lg">开始加工</span>
                </div>

                <div
                  @click="handleBarCode('结束加工', 'endWork')"
                  class="operation-card bg-gradient-to-br from-green-50 to-green-100 hover:from-green-100 hover:to-green-200 border-green-200"
                >
                  <Icon
                    icon="ant-design:play-square-outlined"
                    class="text-green-600 text-4xl mb-2"
                  />
                  <span class="text-green-800 font-medium text-lg">结束加工</span>
                </div>

                <!-- <div
                  @click="handleBarCode('二次加工','erCiJiaGong')"
                  class="operation-card bg-gradient-to-br from-green-50 to-green-100 hover:from-green-100 hover:to-green-200 border-green-200"
                >
                  <Icon icon="ant-design:tool-outlined" class="text-green-600 text-4xl mb-2" />
                  <span class="text-green-800 font-medium text-lg">二次加工</span>
                </div>

                <div
                  @click="handleBarCode('内部返修','neibuFanxiu')"
                  class="operation-card bg-gradient-to-br from-green-50 to-green-100 hover:from-green-100 hover:to-green-200 border-green-200"
                >
                  <Icon icon="ant-design:function-outlined" class="text-green-600 text-4xl mb-2" />
                  <span class="text-green-800 font-medium text-lg">内部返修</span>
                </div> -->
              </div>
            </Card>
          </div>
          <div class="mb-6">
            <Card class="shadow-sm border-0 rounded-lg overflow-hidden">
              <template #title>
                <div class="flex items-center space-x-2">
                  <Icon icon="ant-design:setting-outlined" class="text-blue-500" />
                  <span class="text-lg font-medium text-gray-800">加工操作</span>
                </div>
              </template>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div
                  @click="openTaskList(machineObj.task?.taskCode)"
                  class="operation-card bg-gradient-to-br from-blue-50 to-blue-100 hover:from-blue-100 hover:to-blue-200 border-blue-200"
                >
                  <Icon icon="simple-line-icons:clock" class="text-blue-600 text-2xl mb-2" />
                  <span class="text-blue-800 font-medium">修改加工时长</span>
                </div>

                <div
                  @click="handleRouterList(machineObj.task?.orderPic?.id)"
                  class="operation-card bg-gradient-to-br from-blue-50 to-blue-100 hover:from-blue-100 hover:to-blue-200 border-blue-200"
                >
                  <Icon icon="simple-line-icons:eye" class="text-blue-600 text-2xl mb-2" />
                  <span class="text-blue-800 font-medium">数铣配置</span>
                </div>
              </div>
            </Card>
          </div>
        </div>

        <div class="enter-y w-full lg:w-1/2">
          <div class="mb-6">
            <Card class="shadow-sm border-0 rounded-lg overflow-hidden">
              <template #title>
                <div class="flex items-center space-x-2">
                  <Icon
                    icon="ant-design:safety-certificate-outlined"
                    class="text-orange-500 text-xl"
                  />
                  <span class="text-xl font-medium text-gray-800">检验操作</span>
                </div>
              </template>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div
                  v-if="hasPermission(['m8:machine:check:sjts'])"
                  @click="handleBarCode('首检提示', 'notifyFirstCheck')"
                  class="operation-card bg-gradient-to-br from-orange-50 to-orange-100 hover:from-orange-100 hover:to-orange-200 border-orange-200"
                >
                  <Icon
                    icon="ant-design:fast-forward-filled"
                    class="text-orange-600 text-4xl mb-2"
                  />
                  <span class="text-orange-800 font-medium text-lg">首检提示</span>
                </div>

                <div
                  v-if="hasPermission(['m8:machine:check:sj'])"
                  @click="addCheckData(machineObj, 1)"
                  class="operation-card bg-gradient-to-br from-orange-50 to-orange-100 hover:from-orange-100 hover:to-orange-200 border-orange-200"
                >
                  <Icon
                    icon="ant-design:fast-forward-filled"
                    class="text-orange-600 text-4xl mb-2"
                  />
                  <span class="text-orange-800 font-medium text-lg">首检</span>
                </div>

                <div
                  v-if="hasPermission(['m8:machine:check:gcj'])"
                  @click="addCheckData(machineObj, 2)"
                  class="operation-card bg-gradient-to-br from-orange-50 to-orange-100 hover:from-orange-100 hover:to-orange-200 border-orange-200"
                >
                  <Icon
                    icon="ant-design:fast-forward-filled"
                    class="text-orange-600 text-4xl mb-2"
                  />
                  <span class="text-orange-800 font-medium text-lg">巡检</span>
                </div>

                <div
                  @click="orderCheckList(machineObj.task?.taskCode)"
                  class="operation-card bg-gradient-to-br from-orange-50 to-orange-100 hover:from-orange-100 hover:to-orange-200 border-orange-200"
                >
                  <Icon icon="simple-line-icons:eye" class="text-orange-600 text-4xl mb-2" />
                  <span class="text-orange-800 font-medium text-lg">检验明细</span>
                </div>
              </div>
            </Card>
          </div>
          <div class="mb-6">
            <Card class="shadow-sm border-0 rounded-lg overflow-hidden">
              <template #title>
                <div class="flex items-center space-x-2">
                  <Icon icon="ant-design:more-outlined" class="text-cyan-500" />
                  <span class="text-lg font-medium text-gray-800">其它操作</span>
                </div>
              </template>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div
                  v-if="hasPermission(['m8:machine:remark:edit'])"
                  @click="addRemark(machineObj)"
                  class="operation-card bg-gradient-to-br from-cyan-50 to-cyan-100 hover:from-cyan-100 hover:to-cyan-200 border-cyan-200"
                >
                  <Icon icon="simple-line-icons:pencil" class="text-cyan-600 text-2xl mb-2" />
                  <span class="text-cyan-800 font-medium">加工备注</span>
                </div>

                <div
                  v-if="hasPermission(['m8:order:pic:viewRemark'])"
                  @click="remarksPush(machineObj)"
                  class="operation-card bg-gradient-to-br from-cyan-50 to-cyan-100 hover:from-cyan-100 hover:to-cyan-200 border-cyan-200"
                >
                  <Icon icon="simple-line-icons:eye" class="text-cyan-600 text-2xl mb-2" />
                  <span class="text-cyan-800 font-medium">查看备注</span>
                </div>

                <div
                  v-if="hasPermission(['m8:machine:view'])"
                  @click="openPool(machineObj)"
                  class="operation-card bg-gradient-to-br from-cyan-50 to-cyan-100 hover:from-cyan-100 hover:to-cyan-200 border-cyan-200"
                >
                  <Icon icon="simple-line-icons:eye" class="text-cyan-600 text-2xl mb-2" />
                  <span class="text-cyan-800 font-medium">任务队列</span>
                </div>

                <div
                  v-if="hasPermission(['m8:order:flow:bcQus:edit'])"
                  @click="handleBC(machineObj)"
                  class="operation-card bg-gradient-to-br from-cyan-50 to-cyan-100 hover:from-cyan-100 hover:to-cyan-200 border-cyan-200"
                >
                  <Icon icon="ant-design:warning-filled" class="text-cyan-600 text-2xl mb-2" />
                  <span class="text-cyan-800 font-medium">BC反馈</span>
                </div>
              </div>
            </Card>
          </div>
        </div>
      </div>

      <BCDrawerForm @register="registerBCDrawer" @success="handleSuccess" />
      <RemarkFormTabs @register="registerRemarkDrawer" />
      <PoolList @register="registerPoolDrawer" />
      <CheckTipModal @register="checkTipRegister" @success="handleSuccess" />
      <OperCheck @register="registerCheckForm" @success="handleSuccess" />

      <BasicDrawer @register="registerTaskDrawer" :showFooter="false" width="80%" title="任务明细">
        <TaskList :taskCode="taskCode" />
      </BasicDrawer>

      <BasicDrawer @register="registerSxDrawer" :showFooter="false" width="80%" title="数铣明细">
        <SxList :orderPic="orderPic" />
      </BasicDrawer>

      <BasicDrawer
        @register="registerRemarksDrawer"
        :showFooter="false"
        width="80%"
        :maskClosable="true"
        title="图纸备注"
      >
        <Remarks :picId="picId" />
      </BasicDrawer>

      <BasicDrawer @register="registerCheckDrawer" :showFooter="false" width="80%" title="检验明细">
        <CheckList :taskCode="taskCode" />
      </BasicDrawer>

      <barcodeModal @register="registerImportModal" @success="handleSuccess" />
    </div>
  </BasicDrawer>
</template>
<script lang="ts" setup name="ViewsM8MachineMachineList">
  import { ref } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { Card } from 'ant-design-vue';
  import { DictLabel } from '/@/components/Dict';
  import { Icon } from '/@/components/Icon';
  import { machineListData, disable, enable } from '/@/api/m8/machine/machine';
  import { useDrawer } from '/@/components/Drawer';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import BCDrawerForm from '/@/views/m8/order/flow/bc/BCDrawerForm.vue';
  import TaskList from '../task/list.vue';
  import SxList from '../../order/sx/list.vue';
  import RemarkFormTabs from '../task/remark/formTabs.vue';
  import Remarks from '/@/views/m8/order/remarks.vue';
  import PoolList from '../task/poolList.vue';
  import CheckList from '../../order/flow/check/list.vue';
  import CheckTipModal from './checkTipModal.vue';
  import { useModal } from '/@/components/Modal';
  import OperCheck from '/@/views/m8/machine/check/form.vue';
  import barcodeModal from './barcodeModal.vue';

  const { showMessage } = useMessage();
  const { hasPermission } = usePermission();

  let machineObj = ref({});
  let taskCode = ref('');
  let orderPic = ref('');
  let picId = ref('');
  let checked = ref(false);

  const [registerBCDrawer, { openDrawer: openBCDrawer }] = useDrawer();
  const [registerTaskDrawer, { openDrawer: openTaskDrawer }] = useDrawer();
  const [registerSxDrawer, { openDrawer: openSxDrawer }] = useDrawer();
  const [registerRemarkDrawer, { openDrawer: openRemarkDrawer }] = useDrawer();
  const [registerRemarksDrawer, { openDrawer: openRemarkskDrawer }] = useDrawer();
  const [registerPoolDrawer, { openDrawer: openPoolDrawer }] = useDrawer();
  const [registerCheckDrawer, { openDrawer: openCheckDrawer }] = useDrawer();
  const [checkTipRegister, { openModal: openCheckTipModal }] = useModal();
  const [registerCheckForm, { openDrawer: openCheckForm }] = useDrawer();
  const [registerImportModal, { openModal: importModal }] = useModal();
  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    console.log(data);
    setDrawerProps({ loading: true });
    checked.value = false;
    let res = await machineListData(data);
    machineObj.value = res.list[0];

    if (machineObj.value.machineStatus != '2') {
      checked.value = true;
    }

    setDrawerProps({ loading: false });
  });

  // onMounted(async() => {
  //   handleSuccess()
  // });

  async function handleSuccess() {
    let res = await machineListData({ id: machineObj.value.id });
    machineObj.value = res.list[0];
  }

  async function switchChange(v) {
    if (v) {
      machineEnable(machineObj.value.code, '0');
    } else {
      machineEnable(machineObj.value.code, '1');
    }
  }

  async function machineEnable(code, type) {
    let res = {
      message: '',
    };
    let data = {
      code,
      eventCode: type,
    };
    if (type == '0') {
      res = await disable(data);
    } else {
      res = await enable(data);
    }
    showMessage(res.message);
    handleSuccess();
  }

  // 编程反馈
  const handleBC = (record) => {
    if (!machineObj.value.task?.orderPic?.picname) {
      showMessage('当前机床无任务加工！');
      return false;
    }
    if (record.machineStatus == '2') {
      showMessage('当前机床不可编程反馈！');
      return false;
    }
    openBCDrawer(true, record);
  };

  function openTaskList(record) {
    if (!record) {
      showMessage('任务信息缺失，请刷新后重试！');
      return false;
    }
    taskCode.value = record;
    openTaskDrawer();
  }

  function handleRouterList(record) {
    if (!record) {
      showMessage('任务信息缺失，请刷新后重试！');
      return false;
    }
    orderPic.value = record;
    openSxDrawer();
  }

  function addRemark(record: Recordable) {
    if (record.task) {
      openRemarkDrawer(true, {
        taskCode: record.task.taskCode,
        operCode: record.task.oper.operCode,
        machineId: record.code,
      });
    } else {
      showMessage('当前机床无任务加工！');
    }
  }

  async function remarksPush(record) {
    if (record.task) {
      picId.value = record.task.orderPic.id;
      openRemarkskDrawer(true);
    } else {
      showMessage('当前机床无备注！');
    }
  }

  async function openPool(record: Recordable) {
    // console.log(record, 'record');
    if (!machineObj.value.task?.orderPic?.picname) {
      showMessage('当前机床无任务加工！');
      return false;
    }
    openPoolDrawer(true, {
      title:
        '机床-' +
        record.name +
        '【' +
        (record.operNames ? record.operNames.replaceAll(',', '-') : '') +
        '】',
      machine: record.code,
      orderPic: record.task && record.task.orderPic,
      taskCode: record.task && record.task.taskCode,
      openType: '2',
    });
  }

  function orderCheckList(record) {
    if (!record) {
      showMessage('任务信息缺失，请刷新后重试！');
      return false;
    }
    taskCode.value = record;
    openCheckDrawer(true);
  }

  // 首检提示
  async function handleBsj(record: Recordable) {
    if (record.task) {
      openCheckTipModal(true, { ...record });
    } else {
      showMessage('任务信息缺失，请刷新后重试！');
    }
  }

  function addCheckData(record, checkType) {
    if (!record.task) {
      showMessage('任务信息缺失，请刷新后重试！');
      return false;
    }

    if (checkType == '1' && !record.canFcheck) {
      showMessage('当前机床不可首检！');
      return false;
    }

    let obj = {
      'task.taskCode': record.task.taskCode,
      machineId: record.code,
      checkType: checkType,
    };
    openCheckForm(true, obj);
  }

  function handleBarCode(title, funcType) {
    // 上机，二次加工，内部返修， 必须处于空闲状态
    if (
      (funcType == 'shangJi' || funcType == 'neibuFanxiu' || funcType == 'erCiJiaGong') &&
      machineObj.value.machineStatus != '0'
    ) {
      showMessage('当前机床正在加工其他图纸【' + machineObj.value.task?.orderPic?.picname + '】');
      return false;
    }
    if (funcType == 'debug' && !machineObj.value.task?.orderPic?.picname) {
      showMessage('当前机床无任务加工！');
      return false;
    }
    if (funcType == 'debug' && machineObj.value.machineStatus != '3') {
      showMessage('当前机床已调试完成');
      return false;
    }
    // 下机，结束加工 机床负责人不为空，
    if ((funcType == 'xiaJi' || funcType == 'endWork') && !machineObj.value.managerNames) {
      showMessage('当前机床无负责人！');
      return false;
    }
    // 开始加工， 机床负责人为空，且状态为调试或者忙碌
    if (funcType == 'beginWork' && machineObj.value.managerNames) {
      showMessage('当前机床正常在加工中！');
      return false;
    }
    if (
      funcType == 'beginWork' &&
      (machineObj.value.machineStatus == '0' || machineObj.value.machineStatus == '2')
    ) {
      showMessage('当前机床无任务加工');
      return false;
    }
    //
    if (
      funcType == 'notifyFirstCheck' &&
      (machineObj.value.firstCheckStatus != '0' || !machineObj.value.task)
    ) {
      showMessage('当前机床不可发送首检通知！');
      return false;
    }

    importModal(true, { title, funcType, machineId: machineObj.value.id });
  }
</script>

<style scoped>
  .operation-card {
    @apply flex flex-col items-center justify-center p-6 rounded-lg border-2 cursor-pointer transition-all duration-300 hover:shadow-md transform hover:-translate-y-1;
    min-height: 120px;
  }

  .operation-card:hover {
    @apply shadow-lg;
  }

  /* 状态标签样式 */
  :deep(.ant-tag) {
    @apply px-4 py-2 rounded-full text-lg font-medium border-0;
  }

  /* DictLabel组件样式优化 - 使用更高优先级 */
  .machine-status-label :deep(.ant-tag) {
    font-size: 1.125rem !important;
    padding: 0.5rem 1rem !important;
    border-radius: 9999px !important;
    font-weight: 500 !important;
    border: none !important;
  }

  /* 通用DictLabel样式 */
  :deep(.dict-label .ant-tag),
  :deep([class*='dict-label'] .ant-tag),
  :deep(.ant-tag[class*='dict']) {
    font-size: 1.125rem !important;
    padding: 0.5rem 1rem !important;
    border-radius: 9999px !important;
    font-weight: 500 !important;
    border: none !important;
  }

  /* 更强制的样式覆盖 - 针对所有可能的DictLabel渲染结果 */
  :deep(.ant-tag) {
    font-size: 1.125rem !important;
    padding: 0.5rem 1rem !important;
    border-radius: 9999px !important;
    font-weight: 500 !important;
  }

  /* 卡片标题样式 */
  :deep(.ant-card-head-title) {
    @apply text-lg font-semibold text-gray-800;
  }

  /* 卡片样式 */
  :deep(.ant-card) {
    @apply shadow-sm border-gray-200;
  }

  :deep(.ant-card-head) {
    @apply bg-gray-50 border-gray-200;
  }

  :deep(.ant-card-body) {
    @apply p-6;
  }

  /* 按钮样式 */
  :deep(.ant-btn) {
    @apply font-medium;
  }

  /* Flex比例样式 */
  .flex-2 {
    flex: 2;
  }

  .flex-6 {
    flex: 6;
  }

  /* 响应式网格 */
  @media (max-width: 768px) {
    .operation-card {
      min-height: 100px;
      @apply p-4;
    }
  }
</style>
